<template>
  <view>
    <view class="styleJobDescriptionContainer">
      <view class="styleJobDescriptionTitleContainer">
        <view class="styleJobDescriptionTitleLine"></view>
        <view class="styleJobDescriptionTitle"> {{ title }}</view>
      </view>
      <u-grid
        :col="4"
        class="styleGridJobDescription"
        :border="false"
        v-if="listJobDescriptions.length > 0"
      >
        <u-grid-item
          class="styleGridJobDescriptionItem"
          v-for="(item, index) in listJobDescriptions"
          :index="index"
          :key="item.layerId"
        >
          <template v-if="personId">
            <u-button
              class="lm-wechat havePerson"
              :hair-line="false"
              hover-class="none"
              @click="clickJobDescriptionItem(index, item)"
            >
            </u-button>
            <u-icon
              class="styleGridJobDescriptionItemIcon"
              :name="iconPng(item)"
              :size="64"
            ></u-icon>
            <view class="styleGridJobDescriptionItemText">{{
              item.title
            }}</view>
          </template>
          <template v-else-if="isAuthSetting">
            <u-button
              class="lm-wechat haveAuthSetting"
              :hair-line="false"
              hover-class="none"
              @click="showLoginDialog"
            >
            </u-button>
            <u-icon
              class="styleGridJobDescriptionItemIcon"
              :name="iconPng(item)"
              :size="64"
            ></u-icon>
            <view class="styleGridJobDescriptionItemText">{{
              item.title
            }}</view>
          </template>
          <template v-else>
            <u-button
              class="lm-wechat none"
              open-type="getUserInfo"
              :hair-line="false"
              hover-class="none"
              @getuserinfo="getUserInfo"
              :loading="getUserInfoLoading"
            >
            </u-button>
          </template>
        </u-grid-item>
      </u-grid>
      <Empty
        v-else
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </view>
</template>
<script>
import { getLayerDetailsData } from "@/api/modules/career";
import Empty from "@/components/Empty.vue";
import LoginDialog from "@/components/LoginDialog";

export default {
  components: {
    Empty,
    LoginDialog,
  },
  props: {
    title: {
      type: String,
      default: "标题",
    },
    positionId: {
      type: String,
      default: "",
    },
    layerId: {
      type: String,
      default: null,
    },
    positionName: {
      type: String,
      default: "",
    },
    pageName: {
      type: String,
      default: "",
    },
    isAuthSetting: {
      type: Boolean,
      default: false,
    },
    personId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      listJobDescriptions: [],
    };
  },
  mounted() {
    // this.checkAuthSetting();
    this.getLayerDetail();
    console.log("personId", this.personId, "isAuthSetting", this.isAuthSetting);
  },
  methods: {
    checkAuthSetting() {
      uni.getSetting({
        success: (res) => {
          if (res && res.authSetting && res.authSetting["scope.userInfo"])
            this.isAuthSetting = true;
          console.log("res", this.res);
        },
      });
    },
    showLoginDialog() {
      console.log("showLoginDialog", this.personId);
      if (this.personId) {
        this.$emit("refreshData");
      } else {
        this.$refs.loginDialog.setVisibility(true);
      }
    },
    iconPng(item) {
      // let matchedIcon = IconList.find((icon) => icon.name === item.title);
      // if (matchedIcon) {
      //   return `../../../../static/positionIcon/${matchedIcon.path}.png`;
      // } else
      if (item.icon) {
        return item.icon;
      } else {
        return "https://upload.yl1001.com/upload/files/view?file=rV_omNEGqOmTLZlj8s6j9in1FZNH8ioN-ywOXbrGAQnOCxBB_mZK_OhQXlXsX.png";
      }
    },
    loginSuccessBack() {
      uni.showToast({
        title: "登录成功",
        icon: "none",
      });
      this.$emit("refreshData");
    },
    getLayerDetail() {
      if (!this.layerId) return;
      this.loading = true;
      const params = {
        id: this.positionId,
        layerIds: this.layerId,
      };
      getLayerDetailsData(params)
        .then((res) => {
          if (res.code == 200) {
            this.listJobDescriptions = res.data[0].children;
            // console.log(
            //   "res111" + this.title,
            //   this.listJobDescriptions,
            //   this.listJobDescriptions.length
            // );
          } else {
            console.log("请求失败");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    clickJobDescriptionItem(index, item) {
      console.log("clickJobDescriptionItem", index, item);
      uni.navigateTo({
        url:
          "/pagesSub/careerNew/positionDictionary/JobDescriptionDetail?layerId=" +
          item.layerId +
          "&title=" +
          item.title +
          "&isNeedBuy=true&positionId=" +
          this.positionId +
          "&positionName=" +
          this.positionName +
          "&oriPrice=" +
          item.oriPrice +
          "&price=" +
          item.price +
          "&pageName=" +
          this.pageName,
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.styleJobDescriptionContainer {
  margin-left: 32rpx;
  margin-right: 32rpx;
  background-color: white;
  border-radius: 16rpx;
  padding-top: 36rpx;
  padding-bottom: 28rpx;
  margin-top: 24rpx;

  .styleJobDescriptionTitleContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 32rpx;

    .styleJobDescriptionTitleLine {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }

    .styleJobDescriptionTitle {
      color: #222222;
      font-size: 32rpx;
      font-weight: 800;
    }
  }

  .styleGridJobDescriptionItem {
    .styleGridJobDescriptionItemIcon {
    }

    .styleGridJobDescriptionItemText {
      margin-top: 6rpx;
      color: #555555;
      font-size: 24rpx;
    }
  }
}
.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lm-wechat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  ::v-deep button {
    background-color: transparent;
    padding: 0 !important;
    border: none;
    height: 100%;
  }
  ::v-deep .u-loading::after {
    background-color: transparent;
  }
}
</style>
